<template>
  <div class="scene_box">
    <h3>创建一个3维场景 Scene</h3>
    <div class="canvas"></div>
  </div>
</template>

<script setup>
import { nextTick } from "vue";
import * as THREE from "three";
nextTick(() => {
  // ******************创建一个场景*************
  // 创建一个三维场景scene
  const scene = new THREE.Scene();
  // 画一个几何体  矩形 长宽高为100
  const geometry = new THREE.BoxGeometry(80, 50, 20);
  // 创建一个材质对象  材质为：基础网格材质 样色为十六进制的00ff00  不受光照影响
  const material = new THREE.MeshBasicMaterial({
    color: 0x00ffa0,
    transparent: true, //开启透明
    opacity: 0.4, //透明度
  });
  // 创建一个物体，即mesh(网格模型)：参数：几何体，材质
  const cube = new THREE.Mesh(geometry, material);
  cube.position.set(0, 0, 0);
  // 将物体添加到场景中
  scene.add(cube);
  // 创建一个坐标轴
  const xyz = new THREE.AxesHelper(100);
  //   将坐标轴对象添加到三维场景中
  scene.add(xyz);
  // console.log(cube, "创建的物体--");
  // *****************照相机******************
  const width = 800;
  const height = 500;
  // 创建一个透视摄像机对象
  // 4个参数：
  // fov	相机视锥体竖直方向视野角度
  // aspect	相机视锥体水平方向和竖直方向长度比，一般设置为Canvas画布宽高比width / height
  // near	相机视锥体近裁截面相对相机距离
  // far	相机视锥体远裁截面相对相机距离，far-near构成了视锥体高度方向
  const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 3000);
  // console.log(camera.position, "相机");

  // 设置相机位置
  camera.position.set(200, 200, 200);
  // 相机的视线 观察的目标点的坐标
  // camera.lookAt(0,0,0)
  camera.lookAt(cube.position); //指向网格模型

  // *****************渲染器*****canvas*************
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height); //创建画布的宽高
  renderer.render(scene, camera); //执行一个渲染操作 生成一个“照片”
  const Dom = document.querySelector(".canvas");
  console.log(Dom, "dom");
  Dom.appendChild(renderer.domElement);
});
</script>


<style lang="scss" scoped>
</style>